import './index.css';
import { registerMicroApps, start } from 'qiankun';
import './public-path.js';
import http from './utils/http.js';
import api from './services/api.js';

// 全局用户状态
let currentUser = null;

// 需要登录才能访问的路由前缀
const protectedRoutes = ['/react', '/vue', '/angular', '/native'];

// 添加导航函数
function navigateTo(url) {
  // 检查是否需要登录
  if (isProtectedRoute(url) && !currentUser) {
    showLoginModal();
    return;
  }
  window.history.pushState(null, null, url);
  // 触发自定义事件，通知子应用路由变化
  window.dispatchEvent(new CustomEvent('main-app-route-change', { detail: url }));
}

// 判断是否为受保护的路由
function isProtectedRoute(url) {
  return protectedRoutes.some(route => url.startsWith(route));
}

// 显示登录模态框
function showLoginModal() {
  const modal = document.getElementById('login-modal');
  if (modal) {
    modal.style.display = 'flex';
  }
}

// 隐藏登录模态框
function hideLoginModal() {
  const modal = document.getElementById('login-modal');
  if (modal) {
    modal.style.display = 'none';
  }
}

// 更新UI显示用户状态
function updateUIWithUserState() {
  const userInfo = document.getElementById('user-info');
  const usernameSpan = document.getElementById('username');
  const loginBtn = document.getElementById('login-btn');
  const logoutBtn = document.getElementById('logout-btn');
  
  if (currentUser) {
    // 用户已登录
    usernameSpan.textContent = currentUser.username;
    userInfo.style.display = 'inline';
    loginBtn.style.display = 'none';
    logoutBtn.style.display = 'inline';
  } else {
    // 用户未登录
    userInfo.style.display = 'none';
    loginBtn.style.display = 'inline';
    logoutBtn.style.display = 'none';
  }
  // 触发全局事件，通知所有子应用用户状态变化
  window.dispatchEvent(new CustomEvent('main-app-user-state-change', {
    detail: {
      isLoggedIn: !!currentUser,
      user: currentUser
    }
  }));
}

// 模拟登录验证
async function authenticateUser(username, password) {
  try {
    // 这里应该是一个真实的API调用
    // 为演示目的，我们接受任何非空的用户名和密码
    const response = await api.user.login({ username, password });
    return response.user;
  } catch (error) {
    throw new Error(error.message || '登录失败');
  }
}

// 登录函数
async function login(username, password) {
  try {
    const user = await authenticateUser(username, password);
    currentUser = user;
    // 保存token到localStorage
    if (user.token) {
      localStorage.setItem('authToken', user.token);
    }
    updateUIWithUserState();
    hideLoginModal();
    console.log('用户已登录:', user);
    
    // 登录成功后，如果当前路径是受保护的路由，则刷新页面以加载子应用
    if (isProtectedRoute(window.location.pathname)) {
      window.location.reload();
    }
    
    return true;
  } catch (error) {
    console.error('登录失败:', error.message);
    alert('登录失败: ' + error.message);
    return false;
  }
}

// 登出函数
async function logout() {
  try {
    await api.user.logout();
  } catch (error) {
    console.error('登出API调用失败:', error);
  } finally {
    // 无论API调用成功与否，都清除本地状态
    currentUser = null;
    localStorage.removeItem('authToken');
    updateUIWithUserState();
    console.log('用户已登出');
    
    // 如果当前在受保护的路由上，重定向到首页
    if (isProtectedRoute(window.location.pathname)) {
      navigateTo('/');
    }
  }
}

// 全局获取用户状态的函数
function getUserState() {
  return {
    isLoggedIn: !!currentUser,
    user: currentUser
  };
}

// 将获取用户状态的函数暴露到全局作用域
window.getMainAppUserState = getUserState;

// 监听未授权事件
window.addEventListener('unauthorized', () => {
  // token过期或无效时的处理
  currentUser = null;
  localStorage.removeItem('authToken');
  updateUIWithUserState();
  showLoginModal();
});

// 等 DOM 加载完成后再注册事件
document.addEventListener('DOMContentLoaded', () => {
  // 为所有导航链接添加事件监听器
  const navLinks = document.querySelectorAll('.mainapp-nav a');
  navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const url = e.target.getAttribute('href');
      navigateTo(url);
    });
  });
  
  // 登录按钮事件
  const loginBtn = document.getElementById('login-btn');
  if (loginBtn) {
    loginBtn.addEventListener('click', () => {
      showLoginModal();
    });
  }
  
  // 登出按钮事件
  const logoutBtn = document.getElementById('logout-btn');
  if (logoutBtn) {
    logoutBtn.addEventListener('click', () => {
      logout();
    });
  }
  
  // 登录表单提交事件
  const loginForm = document.getElementById('login-form');
  if (loginForm) {
    loginForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      const username = document.getElementById('username-input').value;
      const password = document.getElementById('password-input').value;
      await login(username, password);
    });
  }
  
  // 关闭模态框事件
  const closeBtn = document.querySelector('.modal .close');
  if (closeBtn) {
    closeBtn.addEventListener('click', () => {
      hideLoginModal();
    });
  }
  
  // 点击模态框外部关闭
  const modal = document.getElementById('login-modal');
  if (modal) {
    modal.addEventListener('click', (e) => {
      if (e.target === modal) {
        hideLoginModal();
      }
    });
  }
  
  // 初始化UI状态
  updateUIWithUserState();
});

// 注册子应用
registerMicroApps([
  {
    name: 'react-app', // 子应用名称
    entry: '//localhost:80', // 子应用入口地址
    container: '#subapp-viewport', // 子应用挂载容器
    activeRule: '/react', // 子应用激活路由规则
  },
  {
    name: 'vue-app',
    entry: '//localhost:80',
    container: '#subapp-viewport',
    activeRule: '/vue',
  },
  {
    name: 'angular-app',
    entry: '//localhost:80',
    container: '#subapp-viewport',
    activeRule: '/angular',
  },
  {
    name: 'native-app',
    entry: '//localhost:80',
    container: '#subapp-viewport',
    activeRule: '/native',
  }
]);

// 监听路由变化，以便处理子应用内的深层路由
window.addEventListener('popstate', () => {
  // 当浏览器前进/后退时，确保正确的子应用被激活
  console.log('Route changed to:', window.location.pathname);
  // 检查是否需要登录
  if (isProtectedRoute(window.location.pathname) && !currentUser) {
    showLoginModal();
    return;
  }
  // 通知子应用路由变化
  window.dispatchEvent(new CustomEvent('main-app-route-change', {
    detail: window.location.pathname
  }));
});

// 启动 qiankun
start({
  prefetch: 'all' // 预加载所有子应用的资源
});